<template>
    <div class="line1">
        <div id="line1" class="" style="width: 90%;height:450px;"></div>
    </div>
</template>

<script>
import echarts from 'echarts/lib/echarts';
// 引入柱状图
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/toolbox';
import 'echarts/lib/component/markPoint';
import 'echarts/lib/component/tooltip';
export default {
    mounted() {
        this.myChart = echarts.init(document.getElementById('line1'));
        this.initData();
    },
    props: ['sevenDate', 'sevenDay'],
    methods: {
        initData() {
            const colors = ['#5793f3', '#675bba', '#d14a61'];
            const option = {
                color: colors,
                title: {
                    text: '走势图',
                    subtext: ''
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['新注册用户', '新增订单', '新增管理员']
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: { readOnly: false },
                        magicType: { type: ['bar', 'line'] },
                        restore: {},
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.sevenDay
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '用户',
                        min: 0,
                        max: 200,
                        position: 'left',
                        axisLine: {
                            lineStyle: {
                                color: '#999'
                            }
                        },
                        axisLabel: {
                            formatter: '{value}'
                        }
                    },
                    {
                        type: 'value',
                        name: '订单',
                        min: 0,
                        max: 200,
                        position: 'right',
                        axisLine: {
                            lineStyle: {
                                color: '#999'
                            }
                        },
                        axisLabel: {
                            formatter: '{value}'
                        }
                    },
                ],
                series: [
                    {
                        name: '新注册用户',
                        type: 'line',
                        data: this.sevenDate[0],
                        yAxisIndex: 1,
                        markPoint: {
                            data: [
                                { type: 'max', name: '最大值' },
                                { type: 'min', name: '最小值' }
                            ]
                        },
                    },
                    {
                        name: '新增订单',
                        type: 'line',
                        data: this.sevenDate[1],
                        yAxisIndex: 1,
                        markPoint: {
                            data: [
                                { type: 'max', name: '最大值' },
                                { type: 'min', name: '最小值' }
                            ]
                        },
                    },
                    {
                        name: '新增管理员',
                        type: 'line',
                        data: this.sevenDate[2],
                        yAxisIndex: 1,
                        markPoint: {
                            data: [
                                { type: 'max', name: '最大值' },
                                { type: 'min', name: '最小值' }
                            ]
                        },
                    }
                ]
            };
            this.myChart.setOption(option);
        }
    },
    watch: {
        sevenDate: function () {
            this.initData()
        },
        sevenDay: function () {
            this.initData()
        }
    }
}
</script>

<style lang="less">
@import '../style/mixin';

.line1 {
    display: flex;
    justify-content: center;
}
</style>
